<template>
  <div class="mod-doc">
    <div class="hd">相关文档</div>
    <div class="bd">
      <ul class="doc-list">
        <template v-for="(item, i) in data">
          <Item :key="i" :data="item" />
        </template>
      </ul>
    </div>
  </div>
</template>

<script lang="jsx">
import { API_BASE } from '../../../config'
import { request } from '../../../utils/request'

const Item = {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  setup({ data }) {
    return {
      download: async () => {
        await request(`cedar-resource/oss/endpoint/download?attachId=${data.value}`);
      }
    };
  },
  render() {
    const { data, download } = this
    return (
      <li
        {...{
          on: { click: download }
        }}
      >
        {data.label}
      </li>
    )
  }
};

export default {
  components: { Item },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup() {
    return {
      getDownloadLink(id) {
        return `${API_BASE}cedar-resource/oss/endpoint/download?attachId=${id}`;
      }
    };
  }
};
</script>

<style scoped></style>
